<template>
  <div class="activity">
    <TopNav />
    <div class="block">
      <div class="date">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="(value) => changeHandler(value)"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          v-loading.fullscreen.lock="fullscreenLoading"
        ></el-date-picker>
      </div>
    </div>
    <div class="list" :style="{minHeight:clientHeight+'px'}">
      <h3>用户活跃度</h3>
      <div class="conter">
        <div class="echarts">
          <div class="con_left">
            <div id="number" style="width: 100%;height: 100%;"></div>
          </div>
          <div class="con_right">
            <div class="serch">
              <el-select v-model="value2" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-button size="small" @click="submit">确定</el-button>
            </div>
            <div id="users" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <div class="table">
          <h3 class="hot">用户活跃度情况</h3>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="nickname" label="姓名" width="180"></el-table-column>
            <el-table-column prop="login_number" label="登录次数"></el-table-column>
            <el-table-column prop="times" label="登录总时长"></el-table-column>
            <el-table-column prop="logintime_text" label="最后登录时间"></el-table-column>
          </el-table>
          <el-pagination
            background
            ref="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import TopNav from './TopNav.vue'
// let token = sessionStorage.getItem('token')
export default {
  name: 'index',
  components: {
    TopNav,
  },
  data() {
    return {
      value1: '',
      options: [],
      value2: '',
      total: 0,
      currentPage: 0,
      pageSize: 0,
      tableData: [],
      fullscreenLoading: false,
      statr: '',
      end: '',
      clientHeight: 0,
      token: '',
    }
  },
  created() {
    this.token = sessionStorage.getItem('token')
  },

  mounted() {
    this.clientHeight = document.body.clientHeight - 120 - 64
    var self = this
    self.fetchData()
    self.submit()
    this.axios({
      method: 'post',
      url: this.$api + '/index/user/getuserlist',
      data: {
        token: this.token,
      },
    }).then(function (res) {
      let first = [
        {
          id: '',
          nickname: '全部',
          url: '',
        },
      ]
      self.options = [...first, ...res.data.data]
    })
  },
  methods: {
    changeHandler(value) {
      var star = new Date(
        new Date(new Date(value[0]).toLocaleDateString()).getTime()
      )
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 2000)
      var starttime = new Date(star).getTime() / 1000
      var endtime = new Date(value[1] + ' 23:59:59').getTime() / 1000
      this.fetchData(starttime, endtime)
      this.statr = starttime
      this.end = endtime
    },
    submit() {
      var myCharts = this.$echarts.init(document.getElementById('users'))
      this.axios({
        method: 'post',
        url: this.$api + '/index/sys.user/userloginnum',
        data: {
          token: this.token,
          type: this.value2,
        },
      }).then(function (res) {
        let timeData = res.data.data.time
        let login = res.data.data.loginnum
        let LoginTime = res.data.data.logintime
        setTimeout(() => {
          var option = {
            title: {
              text: '用户活跃度趋势',
              left: 'center',
              textStyle: {
                fontSize: '14',
                color: '#111',
              },
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return `${params[0].axisValue}<br />登录次数:\r\r${
                  params[0].data
                }<br />登录时长:${LoginTime[params[0].dataIndex]}`
              },
            },
            legend: {
              data: timeData,
            },
            grid: {
              left: '3%',
              right: '6%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: {
              type: 'category',
              name: '日期',
              boundaryGap: false,
              data: timeData,
            },
            yAxis: {
              name: '登录次数',
            },
            color: '#55E4C2',
            series: [
              {
                type: 'line',
                stack: 'Total',
                data: login,
              },
            ],
          }
          myCharts.setOption(option)
          window.onresize = myCharts.resize()
        }, 200)
      })
    },
    fetchData(starttime, endtime) {
      var self = this
      this.axios({
        method: 'post',
        url: this.$api + '/index/sys.user/userloginInfo',
        data: {
          token: this.token,
          starttime: starttime,
          endtime: endtime,
          page: this.currentPage,
        },
      }).then(function (res) {
        if (res.data.code == 401) {
          self.$message({
            message: '请登录后再操作！',
          })
          self.$router.push({
            name: 'login',
          })
        }
        if (self.currentPage == 1) {
          self.currentPage = 1
        } else if (self.currentPage == self.total) {
          self.currentPage = self.total
        }
        self.total = res.data.data.total
        self.pageSize = res.data.data.per_page
        self.currentPage = res.data.data.current_page
        var items = []
        for (var i = 0; i < res.data.data.data.length; i++) {
          var item = res.data.data.data[i]
          items.push(item)
        }
        self.tableData = items
      })
      var myChart = this.$echarts.init(document.getElementById('number'))
      var myCharts = this.$echarts.init(document.getElementById('users'))
      this.axios({
        method: 'post',
        url: this.$api + '/index/sys.user/userloginnum',
        data: {
          token: this.token,
          starttime: starttime,
          endtime: endtime,
          type: this.value2,
        },
      }).then(function (res) {
        if (res.data.code == 0) {
          self.$alert(res.data.msg, {
            confirmButtonText: '确定',
            showClose: false,
            callback: (action) => {
              self.inig()
            },
          })
        } else {
          var usernum = res.data.data.usernum + '        '
          var userloginnum = res.data.data.userloginnum
          var logincountnum = res.data.data.logincountnum
          var logincounttime = res.data.data.logincounttime
        }

        //配置图表
        var option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '4%',
            left: 'center',
            width: '380',
            textStyle: {
              fontSize: '14',
              color: '#111',
            },
          },
          color: ['#f5b93f', '#3CBDF6', '#AC98CC', '#55e4c2'],
          series: [
            {
              type: 'pie',
              radius: ['60%', '70%'],
              top: '10%',
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'center',
                formatter: function () {
                  return '用户活跃度\r\n\r\n' + userloginnum
                },
                textStyle: {
                  fontSize: '14',
                  color: '#111',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: usernum,
                  name: '总人数：' + usernum,
                },
                {
                  value: logincountnum,
                  name: '总登录次数:' + logincountnum,
                },
                {
                  value: userloginnum,
                  name: '今日登录人数：' + userloginnum,
                },
                {
                  value: logincounttime,
                  name: '今日登录时长：' + logincounttime,
                },
              ],
            },
          ],
        }
        myChart.setOption(option)
        window.onresize = myChart.resize()
        console.log(res.data.data)
      })
    },
    inig() {
      this.fetchData()
    },
    handleSizeChange: function (size) {
      this.pagesize = size
      console.log(this.pagesize) //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      var self = this
      this.currentPage = currentPage
      this.fetchData(self.statr, self.end, currentPage)
    },
  },
}
</script>

<style>
.activity .echarts::after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  clear: both;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 40px;
}

.activity .con_left {
  width: 50%;
  float: left;
  height: 360px;
  border: 1px solid #eee;
  box-sizing: border-box;
}

.activity .con_right {
  width: 50%;
  float: left;
  height: 360px;
}

.activity .serch {
  text-align: right;
}

.activity .el-select {
  width: 130px;
}

.activity .el-input__inner {
  height: 30px;
  line-height: 30px;
  border: 1px solid #eee;
}

.activity .el-input__icon {
  line-height: 30px;
}

.activity .el-button--small,
.activity .el-button--small.is-round {
  padding: 8px 15px;
  vertical-align: bottom;
  border: 1px solid #55e4c2;
  color: #55e4c2;
}

.activity .el-select-dropdown__item {
  font-size: 12px;
}

.activity .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  color: #55e4c2;
  font-weight: normal;
}

.activity .el-tag {
  color: #55e4c2;
}

.activity .el-select .el-tag {
  padding: 0;
  background: none;
  border: 0;
}

.activity .table {
  margin-top: 40px;
}

.activity .table .hot {
  border: 0;
}

.activity .table .hot::after {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  top: 18px;
}

.activity .table .el-table {
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  margin-bottom: 18px;
}

.activity .table .el-table th {
  background: #55e4c2;
}

.activity .table .el-table th,
.activity .table .el-table td {
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #111111;
}

.activity .table .el-pagination {
  margin-bottom: 30px;
  text-align: right;
}

.activity
  .table
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background: #55e4c2;
}
</style>
